<template>
  <!--向导-->
  <el-steps :active="active" finish-status="success">
    <el-step
      v-for="(item, index) in cardOrder"
      :key="index"
      :title="item.title"
    >
    </el-step>
  </el-steps>
  <!--表单-->
  <el-form
    :model="model"
    ref="formControl"
    :inline="false"
    class="demo-form-inline"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
    :size="size"
    v-bind="$attrs"
  >
    <el-card class="box-card" style="margin-bottom: 10px;"
      v-for="(item, index) in cardOrder"
      :key="index"
      v-show="active === index"
    >
      <template #header>
        <div class="card-header">
          <span>{{item.title}}</span>
        </div>
      </template>
      <el-row :gutter="15">
        <el-col
          v-for="(ctrId, index) in item.colIds"
          :key="'form_' + ctrId + index"
          :span="formColSpan[ctrId]"
          v-show="showCol[ctrId]"
        >
          <transition name="el-zoom-in-top">
            <el-form-item
              :label="itemMeta[ctrId].label"
              :prop="itemMeta[ctrId].colName"
              v-show="showCol[ctrId]"
            >
              <component
                :is="formItemKey[itemMeta[ctrId].controlType]"
                :model="model"
                v-bind="itemMeta[ctrId]"
              >
              </component>
            </el-form-item>
          </transition>
        </el-col>
      </el-row>
    </el-card>    
  </el-form>
  <el-button type="" @click="next">下一步</el-button>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue'
  import { ElForm, ElFormItem, ElRow, ElCol, ElCard, ElButton, ElSteps, ElStep } from 'element-plus'

  // 引入表单子控件
  import { formItem, formItemKey } from './item/_map-form-item'

  // 表单控件的属性 
  import { formProps, formController } from '../map'

  export default defineComponent({
    name: 'el-from-div',
    components: {
      ElForm, ElFormItem, ElRow, ElCol, ElCard, ElButton, ElSteps, ElStep,
      ...formItem
    },
    props: {
      ...formProps
    },
    setup (props, context) {
      // console.log('表单控件的props：', props)

      // 获取 $ref
      const formControl = ref(null)
      onMounted(() => {
        // console.log('表单dom', formControl)
      })

      const {
        formMeta,
        model,
        partModel
      } = props

      / 调用表单的控制类
      const {
        formColSpan, // 确定组件占位
        // formRules, // 表单的验证规则
        showCol, // 是否显示字段的对象
        setFormColShow, // 设置组件联动
      } = formController(formMeta, model, partModel)

      // 获取分栏信息
      const subs = props.subs

      if (subs.type === 'card1'){

      }

      const cardOrder = subs.cols ?? []
      
      // tab 
      const active = ref(0)

      const next = () => {
        active.value ++
        if (active.value >= cardOrder.length ) {
          active.value = 0
        }
      }

      return {
        ...formMeta,
        cardOrder,
        active, // step 的步骤
        next, // 下一步
        showCol, // 是否显示字段的对象
        formColSpan, // 确定组件占位
        formRules, // 表单的验证规则
        // 函数
        setFormColShow, // 设置组件联动
        //
        formControl, // 获取表单dom
        formItemKey // 子控件字典

      }
    }
  })
</script>